<template>
    <section class="doctors">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <user-top></user-top>
        <user-nav :list="list" :width="160"></user-nav>
        <div class="container clearfix">
            <div class="doctors-left">
                <user-info style="margin-bottom: 10px"></user-info>
                <div class="btn">
                    <p><img src="../../assets/Business/xiaoxi.png" alt=""><span>立即咨询</span></p>
                    <p><img src="../../assets/Business/yu.png" alt=""><span>我要预约</span></p>
                </div>
                <div class="iphone">
                     <div class="iphone-num">
                         <img src="../../assets/Business/dian.png" alt="">
                        <p>致电医生助理</p>
                        <p>400-890-8655</p>
                     </div>
                    <div class="iphone-text">
                        <ul>
                            <li><img src="../../assets/Business/yi.png" alt=""><span>一对一服务</span></li>
                            <li><img src="../../assets/Business/fei.png" alt=""><span>快速约见医生</span></li>
                            <li><img src="../../assets/Business/ding.png" alt=""><span>个人定制服务</span></li>
                            <li><img src="../../assets/Business/bao.png" alt=""><span>红粉安全保障</span></li>
                        </ul>
                    </div>
                </div>
                <img src="../../assets/meirong1.jpg" alt="">
                <answer-list :answerlist="answerlist" v-if="path===true"></answer-list>
            </div>
            <div class="left doctors-box ">

                <router-view></router-view>
                <div style="clear: both"></div>
            </div>
            <div class="right doctors-right">
                <div class="time">
                    <p><img src="../../assets/Business/time.png" alt=""><span>坐诊时间：08:30-18:30</span></p>
                    <ul>
                        <li>周一</li>
                        <li>周二</li>
                        <li>周三</li>
                        <li>周四</li>
                        <li>周五</li>
                        <li>周六</li>
                    </ul>
                </div>
                <side-list :list="sidelist"></side-list>
            </div>
            <div style="clear: both"></div>
            <product-Nav :navList="i" v-for="(i, k) in navList1" :key="k"></product-Nav>
        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </section>
</template>

<script>
    import HeaderMenu from '@/components/Header/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import UserTop from '../../components/Usertop/'
    import MyDiary from '../../components/Usertop/MyDiary'
    import UserNav from '../../components/Usertop/userNav'
    import AnswerList from '../../components/Circle/AnswerList'
    import UserInfo from "../../components/Business/UserInfo"
    import SideList from "@/components/SideMenu/SideList"
    import productNav from "@/components/ProductNav/"

    export default {
        name: "doctors",
        components: {
            PageFooter,
            BottomIcon,
            HeaderMenu,
            UserTop,
            UserNav,
            UserInfo,
            SideList,
            MyDiary,
            productNav,
            AnswerList
        },
        data () {
            return {
                sidelist: [
                    {
                        id: 1,
                        name: '竞价排名',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 2,
                        name: '大家正在预约',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 3,
                        name: '新品推荐',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                ],
                navList1: [
                    {id: 1, title: '猜你喜欢',type:1,child:[
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },
                            {
                                evaluate:2.0,
                                price:9999,
                                oldPrice:12323,
                                delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                                jiGou:'美橙医疗整形美容',
                                num:22
                            },


                        ]
                    },
                ],
                list: [
                    {id:1,name:"首页",show:false,path:'/translates/home'},
                    {id:2,name:"预约",show:false,path:'/translates/make'},
                    {id:3,name:"日记",show:true,path:'/translates/diary'},
                    {id:4,name:"资讯相册",show:true,path:'/translates/information'},
                    {id:5,name:"圈子",show:false,path:'/translates/cricle'},
                    {id:6,name:"粉丝",num:200,show:false,path:'/translates/fans'},
                    {id:7,name:"关注",num:200,show:false,path:'/translates/follow'},
                ],
                answerlist:[

                    {
                        id:1,
                        problem:'鼻综合一周，为什么笑容僵硬，上嘴唇不露齿？',
                        answer:'崔医生：做完鼻子一般都会肿，笑起来面部僵硬属于正常，如果还是觉得不适。可以去医院复查',

                    }
                ],
            }
        },
        computed: {
            path () {
                if(this.$route.path==='/doctors/home'){
                    return true
                }
            },
        },
    }
</script>

<style scoped lang="less">
    @import "../../style/style.less";
    .doctors{
        .width{
            width: 900px;
        }
        .doctors-left{
            width: 255px;
            float: left;
            >img{
                width: 255px;
                height: 350px;
            }
            .btn{
                margin-bottom: 20px;
                p{
                    color: white;
                    height: 35px;
                    background-color: #ff5371;
                    border-radius: 4px;
                    text-align: center;
                    line-height: 35px;
                    font-size: 14px;
                    margin-top: 10px;

                    span{
                        vertical-align: top;
                    }
                    img{
                        margin-top: 5px;
                        margin-right: 5px;
                    }
                }
            }
            .iphone{
                height:151px;
                border: solid 1px #e0e0e0;
                margin-bottom: 25px;
                padding: 10px 10px;
                .iphone-num{
                    height: 60px;
                    border-bottom: solid 1px #e0e0e0;
                    font-size: 14px;
                    color: #333333;
                    img{
                        float: left;
                        margin-top: 7px;
                        margin-left: 7px;
                    }
                    p{
                        width: 50%;
                        float: left;
                        margin-left: 10px;
                    }
                    >:nth-child(2){
                        margin-top: 5px;
                    }
                }
                .iphone-text{
                    padding-left: 10px;
                    ul{
                        li{
                            width: 50%;
                            float: left;
                            font-size: 12px;
                            color: #333333;
                            margin-top:10px;
                            img{
                                margin-right: 5px;
                            }
                            span{
                                vertical-align: top;
                            }
                        }
                    }
                }

            }
        }
    }
    .doctors-box{
       width: 640px;
        float: left;
        margin-left: 15px;

    }
    .doctors-right{
      width: 255px;
        float: right;
        margin-left: 15px;
        .time{
            height: 89px;
            background-color: #ff5371;
            border-radius: 10px;
            padding: 15px 36px;
            font-size: 15px;
            color: #ffffff;
            p{
                img{
                    margin-right: 8px;
                    margin-left:6px;
                }
            }
            ul{
                margin-top:5px;
                li{
                    float: left;
                    width: 25px;
                    text-align: center;
                    margin-right: 6px;
                }
                >:last-child{
                    margin-right: 0;
                }
            }
        }
    }
    .container{
        padding-bottom: 60px;
        margin-top: 30px;
    }
</style>